<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:jsf="http://xmlns.jcp.org/jsf"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
	xmlns:p="http://primefaces.org/ui">
<f:view>
	<f:metadata>
		<f:viewAction action="#{menuMB.updateMenu(32)}" />
	</f:metadata>
	<ui:composition template="/WEB-INF/templates/defaultLayout.xhtml">

		<!-- Definiendo la cabecera de la pagina -->
		<ui:define name="title">
			<h:outputText value="Sucursal" />
		</ui:define>


		<!-- Definiendo el cuerpo de la pagina -->
		<ui:define name="content">

			<h:outputStylesheet library="css" name="main.css" />


			<h:panelGroup rendered="#{sucursalCRUDBean.succes}">
				<h:form>
					<div class="modal-dialog-bg"
						style="opacity: 0.4; width: 1366px; height: 1002px;"></div>
					<div class="modal-dialog p6n-popup"
						style="left: 502px; top: 200px;">
						<div class="modal-dialog-title modal-dialog-title-draggable">
							<span class="modal-dialog-title-text">Creación
								Satisfactoria</span><span class="modal-dialog-title-close"></span>
						</div>
						<div class="modal-dialog-content ng-binding">La sucursal fue
							creada satistactoriamente.</div>
						<div class="modal-dialog-buttons">
							<h:commandButton value="Aceptar" action="list?faces-redirect=true"
								immediate="true" />
						</div>
					</div>
				</h:form>
			</h:panelGroup>
			<h:panelGroup rendered="#{sucursalCRUDBean.failure}">
				<h:form>
					<div class="p6n-api-access-in-page-error" style="left: 516px;">
						<div>
							<div>
								<p>
									<h:messages />
								</p>
							</div>
							<div style="text-align: center;">
								<h:commandLink value="Aceptar"
									action="list?faces-redirect=true"
									immediate="true" styleClass="p6n-api-access-in-page-error-link" />
							</div>
						</div>
					</div>
					<div class="modal-dialog-bg"
							style="opacity: 0.4; width: 1366px; height: 1200px;"></div>
				</h:form>
			</h:panelGroup>

			<h:form id="formSucursal">
				<p:focus for="txtDenominacion"></p:focus>
				<br />
				<div>
					<div style="margin-left: 50px;">
						<div>
							<div>
								<div class="p6n-api-consent-screen-title">SUCURSAL</div>
								<div class="p6n-api-consent-screen-inputs">
									<div class="sf-separator">
										<h3 class="p6n-api-consent-screen-title"
											style="color: #298B11;">Datos Generales</h3>
									</div>
									<div class="p6n-api-consent-screen-input-section">
										<div class="p6n-api-consent-screen-label">DENOMINACION</div>
										<div>
											<h:inputText id="txtDenominacion" required="true" onkeyup="this.value = this.value.toUpperCase();"
												value="#{sucursalCRUDBean.denominacion}" maxlength="140" autocomplete="off" />
										</div>
									</div>
									<div
										class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
										<h:message for="txtDenominacion" />
									</div>
									<div class="p6n-api-consent-screen-input-section">
										<div class="p6n-api-consent-screen-label">ABREVIATURA</div>
										<div>
											<h:inputText id="txtAbreviatura" onkeyup="this.value = this.value.toUpperCase();"
												value="#{sucursalCRUDBean.abreviatura}" maxlength="10"  autocomplete="off"/>
										</div>
									</div>
									<div
										class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
										<h:message for="txtAbreviatura" />
									</div>

									<br />
									<div class="sf-separator">
										<h3 class="p6n-api-consent-screen-title"
											style="color: #298B11;">Ubigeo</h3>
									</div>
									<div class="p6n-api-consent-screen-input-section">
										<div>
											<div class="p6n-api-consent-screen-input-section">
												<div style="display: inline-block; width: 190px;">
													<div class="p6n-api-consent-screen-label">DEPARTAMENTO</div>
													<div>
														<h:selectOneMenu id="cmbDepartamento"
															value="#{sucursalCRUDBean.idDepartamentoSelected}"
															required="true"
															requiredMessage="Seleccione tipo departamento">
															<f:selectItem itemLabel="--SELECCIONE--" itemValue="" />
															<f:selectItems
																value="#{sucursalCRUDBean.mapDepartamentos.entrySet()}"
																var="val" itemLabel="#{val.value}"
																itemValue="#{val.key}" />
															<f:ajax
																listener="#{sucursalCRUDBean.actualizarProvincias()}"
																execute="@this" render="cmbProvincia"></f:ajax>
														</h:selectOneMenu>
													</div>
												</div>
												<div style="display: inline-block; width: 190px;">
													<div class="p6n-api-consent-screen-label">PROVINCIA</div>
													<div>
														<h:selectOneMenu id="cmbProvincia"
															value="#{sucursalCRUDBean.idProvinciaSelected}"
															required="true"
															requiredMessage="Seleccione tipo provincia">
															<f:selectItem itemLabel="--SELECCIONE--" itemValue="" />
															<f:selectItems
																value="#{sucursalCRUDBean.mapProvincias.entrySet()}"
																var="val" itemLabel="#{val.value}"
																itemValue="#{val.key}" />
															<f:ajax
																listener="#{sucursalCRUDBean.actualizarDistritos()}"
																execute="@this" render="cmbDistrito"></f:ajax>
														</h:selectOneMenu>
													</div>
												</div>
												<div style="display: inline-block; width: 190px;">
													<div class="p6n-api-consent-screen-label">DISTRITO</div>
													<div>
														<h:selectOneMenu id="cmbDistrito"
															value="#{sucursalCRUDBean.idDistritoSelected}"
															required="true"
															requiredMessage="Seleccione tipo provincia">
															<f:selectItem itemLabel="--SELECCIONE--" itemValue="" />
															<f:selectItems
																value="#{sucursalCRUDBean.mapDistritos.entrySet()}"
																var="val" itemLabel="#{val.value}"
																itemValue="#{val.key}" />
														</h:selectOneMenu>
													</div>
												</div>
											</div>
											<div
												class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
												<h:message for="cmbDepartamento" />
											</div>
											<div
												class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
												<h:message for="cmbProvincia" />
											</div>
											<div class="p6n-api-consent-screen-input-section"></div>
											<div
												class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
												<h:message for="cmbDistrito" />
											</div>
										</div>
									</div>
									<br />
									<div class="sf-separator">
										<h3 class="p6n-api-consent-screen-title"
											style="color: #298B11;">Agencias</h3>
									</div>
									<div class="p6n-api-consent-screen-input-section">
										<div class="buttons p6n-api-consent-screen-inputs">
											<div class="tiptip">
												<h:commandLink styleClass="button left" title="Nueva bóveda">
													<f:ajax
														listener="#{sucursalCRUDBean.openDialogForCreateAgencia()}"
														render="dlgAgencia formDlgAgencia"></f:ajax>
													<span class="icon icon3"></span>
													<span class="label">Nuevo</span>
												</h:commandLink>
											</div>
										</div>
										<p:dataTable id="tablaAgencias" var="agencia"
											value="#{sucursalCRUDBean.tablaAgencias.rows}"
											selectionMode="single"
											selection="#{sucursalCRUDBean.tablaAgencias.selectedRow}"
											rowKey="#{agencia}" rowIndexVar="row">
											<p:column headerText="Nro" width="5%"
												style="text-align:center;">
												<h:outputText value="#{row + 1}" />
											</p:column>
											<p:column headerText="DENOMINACION">
												<h:outputText value="#{agencia.denominacion}" />
											</p:column>
											<p:column headerText="ABREVIATURA">
												<h:outputText value="#{agencia.abreviatura}" />
											</p:column>
											<p:column headerText="CODIGO">
												<h:outputText value="#{agencia.codigoagencia}" />
											</p:column>
											<p:column headerText="ESTADO">
												<h:outputText
													value="#{agencia.estado ? 'Activo' : 'Inactivo'}" />
											</p:column>
											<p:column headerText="STATUS" style="text-align:center;" width="180">
												<h:commandButton value="Editar" styleClass="action green">
													<f:ajax
														listener="#{sucursalCRUDBean.openDialogForEditAgencia(agencia)}"
														render="dlgAgencia formDlgAgencia"></f:ajax>
												</h:commandButton>
												<h:commandButton value="Eliminar" styleClass="action red">
													<f:ajax
														listener="#{sucursalCRUDBean.deleteAgencia(agencia)}"
														render="tablaAgencias"></f:ajax>
												</h:commandButton>
											</p:column>
										</p:dataTable>
									</div>
									<br />
									<div class="sf-buttons" style="float: left;">
										<h:commandButton value="Guardar"
											action="#{sucursalCRUDBean.createSucursal()}"
											styleClass="action green" />
										<h:commandButton value="Cancelar" immediate="true"
											action="list?faces-redirect=true" styleClass="action" />
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</h:form>

			<h:panelGroup id="dlgAgencia">
				<h:panelGroup rendered="#{sucursalCRUDBean.dlgAgencia}">
					<div class="modal-dialog-bg"
						style="opacity: 0.4; width: 1366px; height: 802px;"></div>
					<div class="modal-dialog p6n-popup" style="left: 402px; top: 50px;">
						<h:form id="formDlgAgencia">
							<p:focus for="txtDenominacionAgencia"></p:focus>
							<div class="modal-dialog-content p6n-acl-add-member-popup"
								style="width: 385px;">
								<div class="p6n-api-consent-screen-inputs">
									<div class="sf-separator">
										<h3 class="p6n-api-consent-screen-title">AGENCIA</h3>
									</div>
									<div class="p6n-api-consent-screen-input-section">
										<div class="p6n-api-consent-screen-label">DENOMINACION</div>
										<div>
											<h:inputText id="txtDenominacionAgencia" onkeyup="this.value = this.value.toUpperCase();"
												value="#{sucursalCRUDBean.denominacionAgencia}" autocomplete="off"
												required="true" requiredMessage="Ingrese denominacion"
												maxlength="140" />
										</div>
									</div>
									<div
										class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
										<h:message for="txtDenominacionAgencia" />
									</div>
									<div class="p6n-api-consent-screen-input-section">
										<div class="p6n-api-consent-screen-label">ABREVIATURA</div>
										<div>
											<h:inputText id="txtAbreviaturaAgencia" onkeyup="this.value = this.value.toUpperCase();"
												value="#{sucursalCRUDBean.abreviaturaAgencia}" autocomplete="off"
												required="true" requiredMessage="Ingrese abreviatura"
												maxlength="15" />
										</div>
									</div>
									<div
										class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
										<h:message for="txtAbreviaturaAgencia" />
									</div>
									<div class="p6n-api-consent-screen-input-section">
										<div class="p6n-api-consent-screen-label">CODIGO</div>
										<div>
											<h:inputText id="txtCodigoAgencia" readonly="true" disabled="true"
												value="#{sucursalCRUDBean.codigoAgencia}" required="true"
												requiredMessage="Ingrese codigo" maxlength="3" />
										</div>
									</div>
									<div
										class="p6n-api-consent-screen-input-error p6n-api-consent-screen-product-name-error-msg">
										<h:message for="txtCodigoAgencia" />
									</div>
								</div>
								<br />
							</div>
							<div class="modal-dialog-buttons" style="float: left;">
								<h:commandButton value="Guardar" styleClass="action green"
									style="float:left">
									<f:ajax listener="#{sucursalCRUDBean.saveAgencia()}"
										execute="@form"
										render=":dlgAgencia @form :formSucursal:tablaAgencias" />
								</h:commandButton>
								<h:commandButton value="Cancelar" styleClass="action">
									<f:ajax listener="#{sucursalCRUDBean.setDlgAgencia(false)}"
										render="@form :dlgAgencia" />
								</h:commandButton>
							</div>
						</h:form>
					</div>
				</h:panelGroup>
			</h:panelGroup>

		</ui:define>

	</ui:composition>
</f:view>
</html>
